<template>
  <div>
    我是app
    {{ this.$store.state.name }}
    <h1>
      方式一：{{ this.$store.state.count }} 方式二： {{ count1 }} 方式三：{{
        count
      }}
    </h1>
    <button @click="fn">这是个加1按钮</button>
    <button @click="ft">这个是另一个</button>
    <hr />
    <h1>计算累加10:{{ js }}</h1>
    <hr />
    <h1>{{ $store.state.One.obj.name }}</h1>
    <h1>年龄{{ $store.state.One.obj.age }}</h1>
    <button @click="fr">这是加年龄的按钮</button>
    <Father></Father>
    <Unc></Unc>
  </div>
</template>
<script>
import Father from './Vuex1/Father.vue'
import Unc from './Vuex1/Unc.vue'
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: '',
  components: {
    Father,
    Unc
  },
  data () {
    return {
      obj: {
        n: 100
      },
      a: '齐伟超'
    }
  },
  created () {
    console.log(this.$store);
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['js']),
    count1 () {
      return this.$store.state.count
    }
  },
  methods: {
    ...mapMutations(['adds']),
    ...mapMutations('One', ['fq']),
    ...mapActions(['qa']),
    fn () {
      //修改仓库里面的值方式一
      // this.$store.commit('adds')
      //传参数数字
      // this.$store.commit('adds', 10)
      // this.$store.commit('adds', this.obj)//对象
      //方式二，先映射,再直接调用
      // this.adds()
      // this.adds(this.obj)
      // this.adds(this.a)

    },
    ft () {
      //执行actions第一种方法
      // this.$store.dispatch('qa', this.obj)
      //第二种方法
      this.qa(this.obj)
    },
    fr () {
      this.$store.commit('One/fq')

    }
  }
}
</script>
<style lang='less'  scoped>
</style>
